<template>
	<view class="change-password-page">
		<!-- 头部导航 -->
		<!-- <view class="header-bag">
			<image src="/static/img/icon-Get-into@3.png" class="back" @click="goBack" mode="aspectFit" />
			<view class="header-center">
				<text class="header-title">修改登录密码</text>
			</view>
		</view> -->
		
		<!-- 内容区域 -->
		<view class="wrapper">
			<view class="cont">
				<!-- 新密码输入 -->
				<view class="input-item">
					<image :src="serverAddress+'img/login/icon-mi-@2x.png'" class="icon" mode="aspectFit" />
					<input 
						:type="showNewPassword ? 'text' : 'password'" 
						v-model="passwordNew" 
						placeholder="请输入新密码" 
						class="input"
					/>
					<view class="eye-icon" @click="toggleNewPassword" v-if="passwordNew">
						<image 
							:src="showNewPassword ? serverAddress+'img/login/icon-oeye@2x.png' : serverAddress+'img/login/icon-ceye@2x.png'" 
							mode="aspectFit" 
						/>
					</view>
				</view>
				
				<!-- 确认密码输入 -->
				<view class="input-item">
					<image :src="serverAddress+'img/login/icon-mi-@2x.png'" class="icon" mode="aspectFit" />
					<input 
						:type="showConfirmPassword ? 'text' : 'password'" 
						v-model="passwordConfirm" 
						placeholder="确认新密码" 
						class="input"
					/>
					<view class="eye-icon" @click="toggleConfirmPassword" v-if="passwordConfirm">
						<image 
							:src="showConfirmPassword ? serverAddress+'img/login/icon-oeye@2x.png' : serverAddress+'img/login/icon-ceye@2x.png'" 
							mode="aspectFit" 
						/>
					</view>
				</view>
			</view>
			
			<!-- 确认修改按钮 -->
			<view class="makesure" :style="{'backgroundImage': `url(${serverAddress}img/login/Button-@2x.png)`}" @click="confirmChange">
				确认修改
			</view>
		</view>
	</view>
</template>

<script>
import { userApi } from '@/api/index.js'
import md5 from '@/utils/md5.js'
import {
		inject
	} from 'vue'
export default {
	data() {
		return {
			serverAddress: inject('$serverAddress'),
			passwordNew: '',
			passwordConfirm: '',
			showNewPassword: false,
			showConfirmPassword: false
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 切换新密码显示状态
		toggleNewPassword() {
			this.showNewPassword = !this.showNewPassword
		},
		
		// 切换确认密码显示状态
		toggleConfirmPassword() {
			this.showConfirmPassword = !this.showConfirmPassword
		},
		
		// 确认修改密码
		async confirmChange() {
			// 获取用户信息
			let userInfo
			try {
				userInfo = uni.getStorageSync('user_info')
				if (!userInfo || !userInfo.token) {
					uni.showToast({
						title: '用户信息获取失败，请重新登录',
						icon: 'none'
					})
					return
				}
			} catch (error) {
				uni.showToast({
					title: '用户信息获取失败',
					icon: 'none'
				})
				return
			}

			// 密码验证正则：6-20位数字和字母组合
			const passwordRegex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/

			// 验证输入
			if (!this.passwordNew.trim() || !this.passwordConfirm.trim()) {
				uni.showToast({
					title: '密码不能为空！',
					icon: 'none'
				})
				return
			}

			if (!passwordRegex.test(this.passwordNew.trim())) {
				uni.showToast({
					title: '必须为6-20数字和字母组合！',
					icon: 'none'
				})
				return
			}

			if (!passwordRegex.test(this.passwordConfirm.trim())) {
				uni.showToast({
					title: '必须为6-20数字和字母组合！',
					icon: 'none'
				})
				return
			}

			if (this.passwordNew.trim() !== this.passwordConfirm.trim()) {
				uni.showToast({
					title: '两次密码输入不一致！',
					icon: 'none'
				})
				return
			}

			try {
				uni.showLoading({
					title: '修改中...'
				})

				// 调用修改密码API
				const result = await userApi.updateUserPassword({
					new_pwd: md5(this.passwordNew.trim()),
					confirm_pwd: md5(this.passwordConfirm.trim())
				})

				uni.hideLoading()

				if (result.r === 0) {
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						// 返回个人中心或设置页面
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: result.msg || '修改失败',
						icon: 'none'
					})
				}
			} catch (error) {
				uni.hideLoading()
				console.error('修改密码失败:', error)
				uni.showToast({
					title: '修改失败，请重试',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style scoped>
/* 重置样式 */
/* * {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
} */

.change-password-page {
	width: 100%;
	min-height: 100vh;
	background-color: #F6F6F6;
}

/* 头部样式 */
.header-bag {
	position: relative;
	width: 100%;
	height: 84rpx;
	line-height: 84rpx;
	padding: 0 28rpx;
	background-color: #FFFFFF;
	font-size: 38rpx;
	color: #656565;
	border-bottom: 1px solid #E6E6E6;
	box-sizing: border-box;
}

.header-center {
	width: 100%;
	text-align: center;
	height: 84rpx;
	line-height: 84rpx;
}

.header-title {
	font-size: 38rpx;
	color: #656565;
}

.back {
	position: absolute;
	left: 28rpx;
	top: 22rpx;
	width: 24rpx;
	height: 38rpx;
}

/* 内容区域样式 */
.wrapper {
	width: 100%;
}

.cont {
	width: 100%;
	padding-top: 30rpx;
}

.input-item {
	position: relative;
	width: 690rpx;
	height: 98rpx;
	border-radius: 2px;
	background-color: white;
	border: 1px solid #F0F0F0;
	margin: 0 auto 32rpx auto;
	display: flex;
	align-items: center;
	padding: 0 32rpx;
	box-sizing: border-box;
}

.input-item:last-child {
	margin-bottom: 0;
}

.icon {
	width: 34rpx;
	height: 38rpx;
	margin-right: 18rpx;
}

.input {
	flex: 1;
	height: 100%;
	font-size: 32rpx;
	border: none;
	background-color: transparent;
}

.eye-icon {
	width: 42rpx;
	height: 30rpx;
	margin-left: 10rpx;
}

.eye-icon image {
	width: 100%;
	height: 100%;
}

/* 按钮样式 */
.makesure {
	width: 690rpx;
	height: 104rpx;
	border: 0px;
	border-radius: 5px;
	overflow: hidden;
	margin: 28rpx 30rpx;
	color: white;
	font-size: 38rpx;
	/* background: linear-gradient(135deg, #ff6b35, #ff4757); */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	background-size: contain;
	background-repeat: no-repeat;
}

.makesure:active {
	opacity: 0.8;
	transform: scale(0.98);
}
</style>